#{extends 'main.html'/}
<div class="l-clear"></div>
<div id="maingrid" style="margin:0; padding:0;width: auto;">
</div> 
<br />
<div style="display:none;"></div>
<div id="detail" style="display:none;">
	<form method="post" id="mainform" class="l-form" ligeruiid="mainform">
		<input type="hidden" name="consProject.id" id="consProject.id" value="">
		<input type="hidden" name="pvrInfo" id="pvrInfo" value=""/>
		<ul>
			<li style="width: 100px; text-align: left;">项目名称：</li>
			<li style="width: 150px; text-align: left;"><div class="l-text"
					style="width: 148px;">
					<input type="text"  id="projectName" name="consProject.projectName"
						validate="{required:true,minlength:2,maxlength:100}"ligerui="{width:148}"
						 ltype="text" class="l-text-field"
						style="width: 144px;" ligeruiid="consProject.projectName">
				</div></li>
			<li style="width: 10px;"></li>
			<li style="width: 60px; text-align: left;">所属月份：</li>
			<li style="width: 100px; text-align: left;">
				<div class="l-text-wrapper" style="width: 98px;">
					<div class="l-text l-text-date" style="width: 98px;">
						<input id="belongDate" name="consProject.belongDate" 
						  validate="{required:true}"	ligerui="{width:98}" 
							ltype="date" format="yyyyMM" class="l-text-field">
					</div>
				</div>
			</li>
			<li style="width: 10px;"></li>
		</ul>
		<div class="l-group">
			<span>建设规模</span>
		</div>
		<ul>
			<li style="width: 100px; text-align: left;">变电容量(MVA)：</li>
			<li style="width: 100px; text-align: left;"><div class="l-text"
					style="width: 98px;">
					<input id="capacity" name="consProject.capacity" type="text"
						validate="{required:true,min:0,max:999999999}"
						ligerui="{width:98}"  ltype="int" class="l-text-field"
						style="width: 94px;">
				</div></li>
			<li style="width: 10px;"></li>
			<li style="width: 100px; text-align: left;">线路长度(km)：</li>
			<li style="width: 100px; text-align: left;"><div class="l-text"
					style="width: 98px;">
					<input id="lineLength"	name="consProject.lineLength" type="text"
						validate="{required:true,min:0,max:999999999}"
						ligerui="{width:98}"  ltype="float" class="l-text-field"
						style="width: 94px;" ligeruiid="consProject.lineLength">
				</div></li>
			<li style="width: 10px;"></li>
			<li style="width: 90px; text-align: left;">总投资(万元)：</li>
			<li style="width: 100px; text-align: left;">
				<div class="l-text"
						style="width: 98px;">
						<input id="countInvest"	name="consProject.countInvest"type="text"
							validate="{required:true,min:0,max:999999999}"
							ligerui="{width:98}"  ltype="float" class="l-text-field"
							style="width: 94px;" ligeruiid="consProject.countInvest">
				</div>
			</li>
		</ul>

		<div class="l-group">
			<span>累计完成情况</span>
		</div>
		<ul>
			<li style="width: 100px; text-align: left;">投资(万元)：</li>
			<li style="width: 100px; text-align: left;"><div class="l-text"
					style="width: 98px;">
					<input  id="totalInvest"name="consProject.totalInvest" type="text"
						validate="{required:true,min:0,max:999999999}"
						ligerui="{width:98}" ltype="float" class="l-text-field"
						style="width: 94px;" ligeruiid="consProject.totalInvest">
				</div></li>
			<li style="width: 10px;"></li>
			<li style="width: 100px; text-align: left;">项目数(项)：</li>
			<li style="width: 100px; text-align: left;"><div class="l-text"
					style="width: 98px;">
					<input id="itemTotal"name="consProject.itemTotal" type="text"
						validate="{required:true,min:0,max:999999999}"
						ligerui="{width:98}"  ltype="number" class="l-text-field"
						style="width: 94px;" ligeruiid="consProject.itemTotal">
				</div></li>
			<li style="width: 10px;"></li>
		</ul>
		<div class="l-group">
			<span>本月完成投资(万元)</span>
		</div>
		<ul>
			<li style="width: 50px; text-align: left;">总额：</li>
			<li style="width: 100px; text-align: left;"><div class="l-text"
					style="width: 98px;">
					<input id="consProject.totalAmount"	name="consProject.totalAmount" type="text"
						validate="{required:true,min:0,max:999999999}"
						ligerui="{width:98}"  ltype="float" class="l-text-field"
						style="width: 94px;" ligeruiid="consProject.totalAmount">
				</div></li>
			<li style="width: 10px;"></li>
			<li style="width: 50px; text-align: left;">土建：</li>
			<li style="width: 100px; text-align: left;"><div class="l-text"
					style="width: 98px;">
					<input id="consProject.civil"name="consProject.civil" type="text"
						validate="{required:true,min:0,max:999999999}"
						ligerui="{width:98}"  ltype="float" class="l-text-field"
						style="width: 94px;" ligeruiid="consProject.civil">
				</div></li>
			<li style="width: 10px;"></li>
			<li style="width: 50px; text-align: left;">设备：</li>
			<li style="width: 100px; text-align: left;"><div class="l-text"
					style="width: 98px;">
					<input id="equipment"name="consProject.equipment" type="text"
						validate="{required:true,min:0,max:999999999}"
						ligerui="{width:98}"  ltype="float" class="l-text-field"
						style="width: 94px;" ligeruiid="consProject.equipment">
				</div></li>
			<li style="width: 10px;"></li>
		</ul>
		<ul>
			<li style="width: 50px; text-align: left;">安装：</li>
			<li style="width: 100px; text-align: left;"><div class="l-text"
					style="width: 98px;">
					<input id="erect"name="consProject.erect"  type="text"
						validate="{required:true,min:0,max:999999999}"
						ligerui="{width:98}" ltype="float" class="l-text-field"
						style="width: 94px;" ligeruiid="consProject.erect">
				</div></li>
			<li style="width: 10px;"></li>
			<li style="width: 50px; text-align: left;">线路：</li>
			<li style="width: 100px; text-align: left;"><div class="l-text"
					style="width: 98px;">
					<input  id="line"name="consProject.line"  type="text"
						validate="{required:true,min:0,max:999999999}"
						ligerui="{width:98}"ltype="float" class="l-text-field"
						style="width: 94px;" ligeruiid="consProject.line">
				</div></li>
			<li style="width: 10px;"></li>
			<li style="width: 50px; text-align: left;">其他：</li>
			<li style="width: 100px; text-align: left;"><div class="l-text"
					style="width: 98px;">
					<input id="other" name="consProject.other" type="text"
						validate="{required:true,min:0,max:999999999}"
						ligerui="{width:98}"  ltype="float" class="l-text-field"
						style="width: 94px;" ligeruiid="consProject.other">
				</div></li>
			<li style="width: 10px;"></li>
		</ul>
		<div class="l-group">
			<span style="float: left;">工程形象进度</span>
			<span style="cursor: pointer; float: left;" id="addPvr">
				<div class="l-toolbar-item l-panel-btn l-toolbar-item-hasicon">
					<span>增加</span>
					<div class="l-icon l-icon-add"></div>
				</div>
			</span>
		</div>
		<table id="pvrInfoTable" style="width: auto;height: auto;" cellspacing="0" cellpadding="0" 
			class="l-grid-body-table">
			
		</table>
		
		<div class="l-group">
			<span>其他信息</span>
		</div>
		<ul>
			<li style="width: 120px; text-align: left;">本月工程质量事故：</li>
			<li style="width: 100px; text-align: left;">
				<div class="l-text"
					style="width: 98px;">
					<input id="qualityAccident"	name="consProject.qualityAccident" type="text"
						value="0" validate="{required:true,min:0,max:100}" 
						ligerui="{width:98}"  ltype="int"
						class="l-text-field" style="width: 94px;"
						ligeruiid="consProject.qualityAccident">
				</div>
			</li>
			<li style="width: 10px;"></li>
			<li style="width: 120px; text-align: left;">本月工程安全事故：</li>
			<li style="width: 100px; text-align: left;">
				<div class="l-text"	style="width: 98px;">
					<input type="text"  id="securityAccident"name="consProject.securityAccident" 
						value="0" validate="{required:true,min:0,max:100}" 
						ligerui="{width:98}" ltype="int"
						class="l-text-field" style="width: 94px;"
						ligeruiid="consProject.securityAccident">
				</div>
			</li>
		</ul>
		<ul>
			<li style="width: 50px; text-align: left;">备注：</li>
			<li style="width: 220px; text-align: left;"><div class="l-text"
					style="width: 218px;">
					<input  id="remark" name="consProject.remark" type="text"
						validate="{required:false,maxlength:100}"
						ligerui="{width:218}"ltype="text" class="l-text-field"
						style="width: 214px;" ligeruiid="consProject.remark">
					<div class="l-text-l"></div>
					<div class="l-text-r"></div>
				</div></li>
			<li style="width: 10px;"></li>
		</ul>
	</form>

</div>
<style>
<!--
element.style {
    height: auto;
}
.l-grid-header .l-grid-header2{
	height: 90px;
}
-->
</style>
<script type="text/javascript">

    $(function () {
    	var grid;
	    var detailWin = null, curentData = null;

	    $("#mainform").ligerForm({
        	inputWidth: 280,		
        	toJSON: JSON2.stringify
        }); 
	    $("#belongDate").ligerDateEditor({ format: "yyyyMM"});
	    
    	
    	//建设规模
    	var columns1=[
    	              {display: '变电容量(MVA)', name: 'capacity', width:50, type: 'String' },
    	              {display: '线路长度(km)', name: 'lineLength', width:50, type: 'String' },
    	              {display: '总投资(万元)', name: 'countInvest', width:50, type: 'String' }
			];
    	//累计完成情况
    	var columns2=[
    	              {display: '投资(万元)', name: 'totalInvest', width:40, type: 'String' },
    	              {display: '项目数(项)', name: 'itemTotal', width:50, type: 'String' }
			];
    	//本月完成投资
    	var columns4=[
					{ display: '总额', name: 'totalAmount', width:50, type: 'String' },
					{ display: '土建', name: 'civil', width:50, type: 'String' },
					{ display: '设备', name: 'equipment', width:50, type: 'String' },
					{ display: '安装', name: 'erect', width:50, type: 'String' },
					{ display: '线路', name: 'line', width:50, type: 'String' },
					{ display: '其他', name: 'other', width:50, type: 'String' }
			];
    	var columns3=[
    	              {display: '工程完成	', name: 'proCompleted', width:150,
    	            	  columns:columns4}
		];
    	
    	//工程形象进度
    	var columns5 = [
						{ display: '本月完成进度', name: 'pvrQuanlity', width:150, type: 'String',align:'left'  },
						{ display: '累计完成进度', name: 'pvrTotal', width:150, type: 'String',align:'left'  }
    	               ];
    	

        function f_initGrid() 
        {
         	grid = $("#maingrid").ligerGrid({
	            columns: [
					{ display: 'id', name: 'id', width:5, hide: true},
					{ display: 'verifyState', name: 'verifyState', width:5, hide: true},
		            { display: '项目名称', name: 'projectName', width:100, type: 'String' },
		            { display: '所属月份', name: 'belongDate', width: 80, type: 'string' },
		            { display: '建 设 规 模', name: 'projectScale',columns:columns1, width:150},
		            { display: '累计完成情况', name: 'completed',columns:columns2, width:100},
		            { display: '本月完成投资(万元)', name: 'monthInvest',columns:columns3, width:300},
		            { display: '工程形象进度', name: 'pvSchedule',columns:columns5, width:300},
		            { display: '本月工程质量事故', name: 'qualityAccident', width: 100, type: 'string' },
		            { display: '本月工程安全事故', name: 'securityAccident', width: 100, type: 'string' },
		            {display:'工程形象建设信息', name:'pvrJsonInfo',hide:true},
		            { display: '备注', name: 'remark', width: 120, type: 'string', type: 'textarea'},
		            { display: '审核状态', name: 'verifyStateStr', width:120}
	            ],
	            url:"/constructP/json",
	            method: "GET",
	            pageSize: 20,                      
	            width:1600,
	            enabledSort:false,
	            rownumbers:false,
	            height:470,
	            rowHeight:"auto",
	            toolbar: { items: [
	                { text: '增加', click: addRow, icon: 'add' },
	                { line: true },
	                { text: '修改', click: modifyRow, icon: 'modify' },
	                { line: true },
	                { text: '删除', click: deleteRow, icon: 'delete' }
	                ] }
	        	});         	
        }
        
        f_initGrid();  
        
        function deleteRow() {
        	var selected = grid.getSelected();
            var verifyState = selected.verifyState;
            if(verifyState==-2 || verifyState==2){
            	{ LG.tip('不允许删除！'); return }
            }
        	f_delete({
        		selected:grid.getSelected(),
        		grid:grid,
        		url:"/constructP/delete?id="
        	});
        }
        
        function addRow()
        {
        	showDetail(
        		{
        		qualityAccident:0,
            	securityAccident:0
        		},
        	false);
        }
        
        function modifyRow()
        {
            var selected = grid.getSelected();
            if (!selected) { LG.tip('请选择行!'); return }
            var verifyState = selected.verifyState;
            if(verifyState==-2 || verifyState==2){
            	{ LG.tip('不允许修改！'); return }
            }
            showDetail({            
            	id:selected.id,
            	projectName:selected.projectName,
            	belongDate:selected.belongDate,
            	capacity:selected.capacity,
            	lineLength:selected.lineLength,
            	countInvest:selected.countInvest,
            	totalInvest:selected.totalInvest,
            	itemTotal:selected.itemTotal,
            	totalAmount:selected.totalAmount,
            	civil:selected.civil,
            	equipment:selected.equipment,
            	erect:selected.erect,
            	line:selected.line,
            	other:selected.other,
            	pvrJsonInfo:selected.pvrJsonInfo,
            	qualityAccident:selected.qualityAccident,
            	securityAccident:selected.securityAccident,
            	remark:selected.remark
            },true);
        }
        
        //[{"projectVisuzlize":{"id":6},"quanlity":0,"accumulateComp":0}]
        function beforeSubmit(){
        	var pvrJson="";
        	$("#pvrInfoTable tr").each(function(i,n){
        		//组装json
        		if(i>=1){
        			pvrJson+=
            			"{"+'"projectVisuzlize":{"id":'+$(n).find("select[name='pv']").val()
            			+'},"quanlity":'+$(n).find("input[name='quanlity']").val()
            			+',"accumulateComp":'+$(n).find("input[name='accumulateComp']").val()+"},"
        		}
        	});
        	if(pvrJson!=""){
        		pvrJson = "["+pvrJson.replace(/,$/,"")+"]";
        	}
        	$("#pvrInfo").val(pvrJson);
        }
        
        //修改构建 工程形象建设表单
        //json format 
        //{"Rows":[{'pvId':11,'quanlisty':1.0,'accumulateComp':1.0},
        //           {'pvId':9,'quanlisty':1.0,'accumulateComp':11.0}],
        //	"Total":2}
        function createPvrForm(pvrJsonInfo){
        	var pvrInfo = $.parseJSON(pvrJsonInfo);
        	if(pvrInfo==null){
        		return false;
        	}
        	var total = pvrInfo.Total;
        	var rows = pvrInfo.Rows;
        	for(var i=0;i<total;i++){
        		addPvrUL();
        		$("#pvrInfoTable tr").each(function(j,n){
        			if(i==(j-1)){
        				$(n).find("select[name='pv']").val(rows[i].pvId);
                		$(n).find("input[name='quanlity']").val(rows[i].quanlisty);
                		$(n).find("input[name='accumulateComp']").val(rows[i].accumulateComp);
        			}
            	});
        	}
        }
        
	    function showDetail(data,modify)
	    {
          currentData = data;
          $("#pvrInfoTable").empty();
          //如果是修改，则自动构建形象表单
          if(modify){
        	  createPvrForm(currentData.pvrJsonInfo);
          }
          if (detailWin)
          {
              detailWin.show(); 
          }
          else
          {
              //创建表单结构
              detailWin = $.ligerDialog.open({
                  target: $("#detail"),
                  width: 700, height: 480, top:5,
                  buttons: [
                  { text: '确定', onclick: function () { $("#mainform").submit(); } },
                  { text: '取消', onclick: function () { detailWin.hide(); } }
                  ]
              });
          }
          if (currentData)
          {    	  
        	  $("[name$=id]").val(currentData.id);
        	  $("[name$=projectName]").val(currentData.projectName);
        	  $("[name$=belongDate]").val(currentData.belongDate);

        	  $("[name$=capacity]").val(currentData.capacity);
        	  $("[name$=lineLength]").val(currentData.lineLength);

        	  $("[name$=countInvest]").val(currentData.countInvest);
        	  $("[name$=totalInvest]").val(currentData.totalInvest);
        	  $("[name$=itemTotal]").val(currentData.itemTotal);

        	  $("[name$=totalAmount]").val(currentData.totalAmount);
        	  $("[name$=civil]").val(currentData.civil);
        	  $("[name$=equipment]").val(currentData.equipment);
        	  $("[name$=erect]").val(currentData.erect);
        	  $("[name$=line]").val(currentData.line);
        	  $("[name$=other]").val(currentData.other);

        	  $("[name$=qualityAccident]").val(currentData.qualityAccident);
        	  $("[name$=securityAccident]").val(currentData.securityAccident);
        	  $("[name$=remark]").val(currentData.remark); 
              
              $("[name$=projectName]").focus();
          }
          
          formSumit({
      		  formId : "mainform",
      		  url :'/constructP/add',
      		  grid:grid,
      		  dialog :detailWin,
      		  sumitSuccess :null,
      		  beforeSubmit : beforeSubmit
      	  });
       }
	    
	    
	    var pvrRow = $("#pvrFormDiv").html().replace("<tbody>","").replace("</tbody>","");
	    var pvrHead = $("#pvrFormHead").html().replace("<tbody>","").replace("</tbody>","");
	    //表单添加工程形象建设 录入表单
	    function addPvrUL(){
	    	var length = $("#pvrInfoTable").find("tr").length;
	    	if(length==0){
	    		$("#pvrInfoTable").append(pvrHead);
	    	}
	    	$("#pvrInfoTable").append(pvrRow);
	    }
	    
	    //添加工程形象录入表单
	    $("#addPvr").click(function(){
	    	addPvrUL();
	    })
	})
	
	//删除形象工程一条表单
	function delPvr(p){
    	$(p).parent().remove();
    	var length = $("#pvrInfoTable").find("tr").length;
    	if(length==1){
    		$("#pvrInfoTable").empty();
    	}
    }
</script>

<table id="pvrFormDiv" style="display: none;">
	<tr class="l-grid-row">
		<td style="width: 100px;" class="l-grid-row-cell ">
			<select	style="width: 120px; margin: 1px;" name="pv">
				#{list pvs,as:'pv'}
					<option value="${pv.id}">${pv.descriptions}</option>
				#{/list}
			</select>
		</td>
		<td style="width: 90px;" class="l-grid-row-cell ">
			<input	type="text" name="quanlity" value="0"	validate="{required:true,min:0,max:100}" 
				ltype="int"	style="width: 90px; margin: 1px;">
		</td>
		<td style="width: 90px;" class="l-grid-row-cell l-grid-row-cell-last">
			<input type="text" name="accumulateComp" value="0"	validate="{required:true,min:0,max:100}"
				ltype="int"	style="width: 90px; margin: 1px;">
		</td>
		<td style="width: 60px; color: blue; cursor: pointer;"
			class="l-grid-row-cell l-grid-row-cell-last" onclick="delPvr(this);">
			删除
		</td>
	</tr>
</table>

<table id="pvrFormHead" style="display: none;">
	<tr class="l-grid-hd-row l-grid-header">
		<td class="l-grid-row-cell" style="height: 23px; width: 100px;">
			描述</td>
		<td class="l-grid-row-cell" style="height: 23px; width: 90px;">
			本月完成</td>
		<td class="l-grid-row-cell" style="height: 23px; width: 90px;">
			累计完成</td>
		<td class="l-grid-row-cell" style="height: 23px; width: 60px;">
			删除</td>
	</tr>
</table>



